import React, { useEffect, useState } from "react";
import "./index.less";
import { NavBar, Tabs, Badge, Toast } from "antd-mobile";
import { Spin } from "antd";
import { PageHeader } from "@/components";
import { useNavigate } from "react-router-dom";
import { getCurrentUser } from "@/utils/authority";
import {
  classificationpPartyBuildingCulture,
  partyBuildingCulture,
  getPartyCultureType,
} from "../service";

type serviceListType = {
  id: number;
  name: string;
  url: string;
  img: any;
};
const PartyBuildingCulture: React.FC = () => {
  const navigate = useNavigate();
  const [cultureList, setCultureList] = useState([]);
  const goto = (url: string) => () => {
    navigate(url);
  };

  const [cultureType, setCultureType] = useState([]);
  const getType = () => {
    getPartyCultureType().then((res) => {
      console.log(res);
      const resData = res.data;
      const result = resData.map((item: any) => {
        return {
          title: item?.dictValue,
          key: item?.dictKey,
        };
      });
      setCultureType([
        {
          title: "全部",
          key: "",
        },
        ...result,
      ]);
    });
  };
  useEffect(() => {
    getType();
    tabsOnChange("");
  }, []);

  const tabsOnChange = function (id: string) {
    partyBuildingCulture({
      villageCode: "511602006004",
      cultureType: id /* classType:selectType  */,
    })
      .then((res) => {
        if (res.code == 200) {
          setCultureList(res.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div className="ListOfPartyMembers_contarnier">
      <div className="header-bg">
        <NavBar onBack={() => navigate("/smartPartyBuilding")}>
          <div className="commontitle">党建文化</div>
        </NavBar>
      </div>
      <div className="ListOfPartyMembers-content">
        <Tabs
          onChange={(e) => tabsOnChange(e)}
          defaultActiveKey={""}
          style={{ background: "#fff" }}
        >
          {cultureType?.map((item, index) => {
            return (
              <Tabs.Tab
                key={item?.key}
                title={
                  <Badge style={{ "--right": "-10px", "--top": "8px" }}>
                    {item?.title}
                  </Badge>
                }
              >
                <div className="menberList">
                  {cultureList?.map((dataItem, dataIndex) => {
                    return (
                      <div
                        key={dataIndex}
                        className="menberList_item"
                        onClick={goto(
                          `/contentDetails?type=${"partyBuildingCulture"}&&detail=${
                            dataItem?.id
                          }`
                        )}
                      >
                        <div className="menberList_imformation">
                          <div className="menberList_imformation-title">
                            {dataItem?.title || "XX"}
                          </div>
                          <div className="menberList_imformation-typeAndTime">
                            <div className="imformation-type">
                              {dataItem?.cultureType || "党建要闻"}
                            </div>
                            <div className="imformation-time">
                              {dataItem?.issueTime || "2023-12-16"}
                            </div>
                          </div>
                        </div>
                        <img
                          src={
                            dataItem?.img || "/images/mycommunity/noImage.jpg"
                          }
                          className="menberList_img"
                        />
                      </div>
                    );
                  })}
                </div>
              </Tabs.Tab>
            );
          })}
        </Tabs>
      </div>
    </div>
  );
};

export default PartyBuildingCulture;
